import { Link, useParams, useSearchParams } from "react-router";
import clsm from "@/lib/utils/clsm";
import Status from "./Status";
import Charts from "./Charts";
import GraphIcon from "@/assets/icons/graph.svg?jsx";
import InfoIcon from "@/assets/icons/info-circle.svg?jsx";
import HistoryIcon from "@/assets/images/history.png?jsx";
import type { ReactNode } from "react";

type OverviewTab = "status" | "charts" | "detail";

export default function Overview() {
  const [search, setSearch] = useSearchParams();

  const params = useParams<{ id: string }>();

  const current = (search.get("view") || "status") as OverviewTab;

  function handleSwitchTab(tab: OverviewTab) {
    setSearch((p) => {
      p.set("view", tab);
      return p;
    });
  }

  return (
    <div className="relative h-full">
      {current === "status" && <Status />}
      {current === "charts" && <Charts />}
      {/* {current === "detail" && <Detail />} */}
      <TabSwitch current={current} onClick={handleSwitchTab} />
    </div>
  );
}

type TabSwitchProps = {
  onClick: (panel: OverviewTab) => void;
  current: OverviewTab;
};

function TabSwitch(props: TabSwitchProps) {
  const { current, onClick } = props;

  return (
    <div className="absolute inset-x-0 bottom-0 py-2">
      <div className="flex justify-center gap-x-4">
        <StyledButton
          active={current === "status"}
          title="详情"
          icon={<InfoIcon height={26} width={26} />}
          onClick={() => onClick("status")}
        />
        <StyledButton
          title="曲线"
          icon={<GraphIcon height={26} width={26} />}
          active={current === "charts"}
          onClick={() => onClick("charts")}
        />
        <StyledButton
          to="/setting/history"
          title="历史"
          imgIcon
          icon={<HistoryIcon className="size-6" />}
        />
      </div>
      <div className="mt-2 flex justify-center gap-x-4">
        <i
          className={clsm(
            "size-2 rounded-full bg-[#505153]",
            current === "status" && "bg-white",
          )}
        ></i>
        <i
          className={clsm(
            "size-2 rounded-full bg-[#505153]",
            current === "charts" && "bg-white",
          )}
        ></i>
        {/* <i
          className={clsm(
            "size-2 rounded-full bg-[#505153]",
            current === "detail" && "bg-white",
          )}
        ></i> */}
      </div>
    </div>
  );
}

type StyledButtonProps = {
  title: string;
  icon: ReactNode;
  to?: string;
  active?: boolean;
  imgIcon?: boolean;
  onClick?: () => void;
};
function StyledButton(props: StyledButtonProps) {
  const { to, title, icon, active, imgIcon, onClick } = props;
  const CM = to ? Link : "button";

  return (
    <CM
      to={to as string}
      className={clsm(
        "flex flex-col",
        imgIcon
          ? "brightness-[0.3] hover:brightness-75"
          : "text-[#505153] hover:text-white/75",
        active && (imgIcon ? "" : "!text-white"),
      )}
      onClick={onClick}
    >
      {icon}
      <span className="mt-1.5 text-xs">{title}</span>
    </CM>
  );
}
